<script setup lang='ts'>

//信息框弹出
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { addTimes, delTimes, editTimes, getTime, getTimes } from '@/api/axios/orderAxios';
import { formatDate } from '@vueuse/core';
import Log from '@/views/monitor/job/log.vue';
import moment from 'moment';

const dialogVisible = ref(false)
const border = ref(true)

// 信息框时间表

const times = ref<[Date, Date]>([
    new Date(2024, 3, 4, 8, 40),
    new Date(2024, 3, 4, 9, 40),
])

//表格数据
const tableData = ref([])
function initTime() {
    getTimes().then(res => {
        console.log(res);
        tableData.value = res.rows
    })
}
initTime()

// 添加时间
const mainTime = ref({
    startTime: null,
    endTime: null
})

const setTime = ref({})
function add() {
    setTime.value = {}
    dialogVisible.value = true
}

// 编辑
const timeEdit = ref({
    id: "",
    state: "1",
    startTime: "",
    endTime: ""
})
function edit(data) {
    console.log(data.endTime);
    console.log( moment("2024-02-01 "+data.startTime,"YYYY-MM-dd HH:mm").toDate());
    // console.log(formatDate(data.endTime,'hh:mm:ss'));
    // times.value =  [,new Date(data.updateTime)]
    times.value = [
        moment("2024-02-01 "+data.startTime,"YYYY-MM-dd HH:mm").toDate(),
        moment("2024-02-01 "+data.endTime,"YYYY-MM-dd HH:mm").toDate(),
    ]
    timeEdit.value.id = data.id
    dialogVisible.value = true
}



function save() {
    if (timeEdit.value.id) {
        console.log(timeEdit.value);
        console.log('bianji');
        timeEdit.value.startTime = formatDate(times.value[0],'hh:mm:ss')
        timeEdit.value.endTime = formatDate(times.value[1],'hh:mm:ss')
        editTimes(timeEdit.value).then(res => {
            console.log(res);
            initTime()
            dialogVisible.value = false
            ElMessage({
                message: '编辑成功',
                type: 'success',
            })
        })
    }else {
        //     添加
        mainTime.value.startTime = formatDate(times.value[0],'hh:mm:ss')
        mainTime.value.endTime = formatDate(times.value[1],'hh:mm:ss')
        addTimes(mainTime.value).then(res => {
            console.log(res);
            initTime()
        })
        dialogVisible.value = false
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
    }

}

// 删除
const del = (data) => {
    // console.log(data);
    ElMessageBox.confirm(
        '此操作将永久删除该时间段, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            delTimes([data.id]).then(res => {
                console.log(res);
                initTime()
            })

            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}

</script>

<template>
    <div class="mb-4">
        <el-button type="primary" @click="add">添加</el-button>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="添加时间段"
        width="768"
    >
        <div>
            <div class="demo-range">
                <span class='timeSelect'><b>选择时间段</b></span>
                <el-time-picker
                    v-model="times"
                    is-range
                    range-separator="To"
                    start-placeholder="Start time"
                    end-placeholder="End time"
                    format='HH:mm'
                />
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button plain @click="dialogVisible = false">取消</el-button>
                <el-button plain type="primary" @click="save">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <div>
        <el-table :data="tableData" style="width: 95%;margin: 0 auto;" :border=border  >
            <el-table-column fixed prop="date" label="日期"  align='center' height='50'>
                <template #default='scope'>
                    <div>{{scope.row.startTime}} - {{scope.row.endTime}}</div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align='center'>
                <template #default='scope'>
                    <el-button link type="primary" size="small" @click='edit(scope.row)'>编辑</el-button>
                    <el-button link type="primary" size="small" @click='del(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style lang='scss'>
.mb-4 {
    margin: 20px 29px;
    span {
        padding: 5px;
    }
}

.el-dialog__header {
    background-color: #1892ff;
    margin-right: 0;
    .el-dialog__title {
        font-size: 16px;
        color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
    }
}

.timeSelect {
    margin-right: 15px;
}

.dialog-footer {
    text-align: center;
    button {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
}

.cell {
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    padding: 9px 0 !important;
    span {
        font-size: 14px;
    }
}
</style>
